<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input v-model="listQuery.title" placeholder="Name" style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilter" />
      <!-- <el-input v-model="listQuery.id" placeholder="ID" style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilter" /> -->
      <el-input v-model="keyword" placeholder="关键字查找" style="width: 200px;" class="filter-item" />

      <!-- <input type="text" v-model="keyword" placeholder="请输入关键字"> -->
      <!-- <el-select v-model="listQuery.importance" placeholder="Imp" clearable style="width: 90px" class="filter-item">
        <el-option v-for="item in importanceOptions" :key="item" :label="item" :value="item" />
      </el-select> -->
      <!-- <el-select v-model="listQuery.type" placeholder="Type" clearable class="filter-item" style="width: 130px">
        <el-option v-for="item in calendarTypeOptions" :key="item.key" :label="item.display_name+'('+item.key+')'" :value="item.key" />
      </el-select> -->
      <el-select v-model="listQuery.sort" style="width: 140px" class="filter-item" @change="handleFilter">
        <el-option v-for="item in sortOptions" :key="item.key" :label="item.label" :value="item.key" />
      </el-select>
      <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">
        Search
      </el-button>
      <!-- <el-button class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-edit" @click="handleCreate">
        Add
      </el-button> -->
      <!-- <el-button v-waves :loading="downloadLoading" class="filter-item" type="primary" icon="el-icon-download" @click="handleDownload">
        Export
      </el-button> -->
      <!-- <el-checkbox v-model="showReviewer" class="filter-item" style="margin-left:15px;" @change="tableKey=tableKey+1">
        reviewer
      </el-checkbox> -->
    </div>

    <el-table
      :key="tableKey"
      v-loading="listLoading"
      :data="filteredItems"
      border
      fit
      highlight-current-row
      style="width: 100%;"
      @sort-change="sortChange"
    >
      <el-table-column label="ID" prop="id" sortable="custom" align="center" width="80" :class-name="getSortClass('id')">
        <template slot-scope="{row}">
          <span @click="handleUpdate(row)">
            <li v-html="highlightKeyword(row.id)" />
          </span>
        </template>
      </el-table-column>
      <el-table-column label="录入时间" width="150px" align="center">
        <template slot-scope="{row}">
          <span @click="handleUpdate(row)">{{ row.timestamp | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
        </template>
      </el-table-column>

      <el-table-column label="沟通时间" width="150px" align="center">
        <template slot-scope="{row}">
          <span @click="handleUpdate(row)"> {{ row.author | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="沟通对象" min-width="150px">
        <template slot-scope="{row}">
          <span class="link-type" @click="handleUpdate(row)">
            <span class="hieghtLi" v-html="highlightKeyword(row.title)" />
            <!-- <el-tag>{{ row.type | typeFilter }}</el-tag> -->
          </span>
        </template>
      </el-table-column>

      <el-table-column label="沟通对象身份介绍" min-width="150px">
        <template slot-scope="{row}">
          <span class="link-type" @click="handleUpdate(row)">
            <li class="hieghtLi" v-html="highlightKeyword(row.remark_one)" />
          </span>
        </template>
      </el-table-column>

      <el-table-column label="聊天记录" min-width="150px">
        <template slot-scope="{row}">
          <span class="link-type" @click="handleUpdate(row)">
            <li class="hieghtLi" v-html="highlightKeyword(row.remark_two)" />
          </span>
        </template>
      </el-table-column>

      <el-table-column label="文字识别" min-width="150px">
        <template slot-scope="{row}">
          <span class="link-type" @click="handleUpdate(row)">
            <li class="hieghtLi" v-html="highlightKeyword(row.importance)" />
          </span>
        </template>
      </el-table-column>

      <el-table-column label="备注信息" min-width="150px">
        <template slot-scope="{row}">
          <span class="link-type" @click="handleUpdate(row)">
            <li class="hieghtLi" v-html="highlightKeyword(row.remark_three)" />
          </span>
        </template>
      </el-table-column>

      <el-table-column label="已通知" min-width="150px">
        <template slot-scope="{row}">
          <span class="link-type" @click="handleUpdate(row)">
            <li class="hieghtLi" v-html="highlightKeyword(row.SelectionChange)" />
          </span>
        </template>
      </el-table-column>
      <el-table-column style="color:red" label="提交人" min-width="150px">
        <template slot-scope="{row}">
          <span style="color:red" class="link-type" @click="handleUpdate(row)">
            <li style="color:red" class="hieghtLi" v-html="highlightKeyword(row.Indiener)" />
          </span>
        </template>
      </el-table-column>
      <!-- <el-table-column label="Title33333" min-width="150px">
        <template slot-scope="{row}">
          <span class="link-type" @click="handleUpdate(row)">{{ row.content_short }}</span>
        </template>
      </el-table-column> -->
      <!-- <span>{{ row.author }}</span> -->

      <!-- <el-table-column label="提交人" width="110px" align="center">
        <template slot-scope="{row}">
          <li v-html="highlightKeyword(row.author)" />
        </template>
      </el-table-column> -->
      <el-table-column v-if="showReviewer" label="Reviewer" width="110px" align="center">
        <template slot-scope="{row}">
          <!-- <span style="color:red;">{{ row.reviewer }}</span> -->
          <li v-html="highlightKeyword(row.reviewer)" />
        </template>
      </el-table-column>
      <!-- <el-table-column label="权重" width="80px">
        <template slot-scope="{row}">
          <svg-icon v-for="n in + row.importance" :key="n" icon-class="star" class="meta-item__icon" />
        </template>
      </el-table-column> -->
      <!-- <el-table-column label="Readings111" align="center" width="95">
        <template slot-scope="{row}">
          <span v-if="row.pageviews" class="link-type" @click="handleFetchPv(row.pageviews)">{{ row.pageviews }}</span>
          <span v-else>0</span>
        </template>
      </el-table-column> -->
      <!-- <el-table-column label="状态" class-name="status-col" width="100">
        <template slot-scope="{row}">
          <el-tag :type="row.status | statusFilter">
            {{ row.status }}
          </el-tag>
        </template>
      </el-table-column> -->
      <el-table-column label="操作" align="center" width="230" class-name="small-padding fixed-width">
        <template slot-scope="{row,$index}">
          <!-- <el-button type="primary" size="mini" @click="handleUpdate(row)">
            编辑
          </el-button> -->
          <!-- <el-button size="mini" type="success" @click="handleModifyStatus(row)">
            加急通知
          </el-button> -->
          <!-- <el-button v-if="row.status!='未完成'" size="mini" @click="handleModifyStatus(row,'未完成')">
            已沟通
          </el-button> -->
          <el-button v-if="row.status!='deleted'" size="mini" type="danger" @click="handleDelete(row,$index)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
    <el-dialog style="width:100%;" :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible">
      <el-form ref="dataForm" :rules="rules" :model="temp" label-position="left" label-width="100px" style="width: 96%; margin-left:50px;">
        <el-form-item label="沟通对象" prop="title">
          <el-input v-model="temp.title" />
        </el-form-item>
        <!-- <el-form-item label="提交人" prop="title">
          <el-input v-model="temp.author" />
        </el-form-item> -->
        <!-- <el-form-item label="改人员职位" prop="type">
          <el-select v-model="temp.type" class="filter-item" placeholder="Please select">
            <el-option v-for="item in calendarTypeOptions" :key="item.key" :label="item.display_name" :value="item.key" />
          </el-select>
        </el-form-item> -->
        <!-- <el-form-item label="更新日期" prop="timestamp">
          <el-date-picker v-model="temp.timestamp" type="datetime" placeholder="Please pick a date" />
        </el-form-item> -->
        <!-- <el-form-item label="状态">
          <el-select v-model="temp.status" class="filter-item" placeholder="Please select">
            <el-option v-for="item in statusOptions" :key="item" :label="item" :value="item" />
          </el-select>
        </el-form-item> -->
        <!-- <el-form-item label="权重值">
          <el-rate v-model="temp.importance" :colors="['#99A9BF', '#F7BA2A', '#FF9900']" :max="3" style="margin-top:8px;" />
        </el-form-item> -->
        <el-form-item label="沟通对象信息介绍">
          <el-input v-model="temp.remark_one" :autosize="{ minRows: 4, maxRows: 4}" type="textarea" placeholder="介绍信息为空" />
        </el-form-item>
        <el-form-item label="聊天记录">
          <el-input v-model="temp.remark_two" :autosize="{ minRows: 4, maxRows: 4}" type="textarea" placeholder="聊天记录为空" />
        </el-form-item>
        <!-- <el-form-item label="记录时间">
          <span>{{ temp.timestamp | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
        </el-form-item> -->
        <!-- <div class="zhasnhi_div_img">
          <img :src="this.uploadedImages" alt="">
        </div> -->
        <photo-wall :key="index+1" :photos="photos" :uploaded-images="uploadedImages" @photo-uploaded="handlePhotoUploaded" />
        <br>
        <br>
        <el-form-item label="文字识别">
          <el-input v-model="temp.importance" :autosize="{ minRows: 4, maxRows: 4}" type="textarea" placeholder="暂无图片上传" />
        </el-form-item>
        <br>
        <br>
        <el-form-item label="备注">
          <el-input v-model="temp.remark_three" :autosize="{ minRows: 4, maxRows: 4}" type="textarea" placeholder="无备注信息" />
        </el-form-item>

        <el-form-item label="已通知">
          <!-- <el-input v-model="temp.SelectionChange"  placeholder="无备注信息" /> -->

          <span>{{ temp.SelectionChange }}</span>
        </el-form-item>
        <el-form-item label="提交人">
          <!-- <el-input v-model="temp.SelectionChange"  placeholder="无备注信息" /> -->
          <span>{{ temp.Indiener }}</span>
        </el-form-item>

        <el-form-item label="">
          <!-- <Button  type="success" size="small" >复制链接</Button> -->
          <!-- https://test-admin.geekpark.net/#/table/complex-table?uid=Justin -->
          <span @click="copyLink(`https://test-admin.geekpark.net/#/table/complex-table?uid=${temp.title}`,)">点我复制地址转发他人</span>
        </el-form-item>
        <DragTable :temp="temp" @custom-event="handleCustomEvent"></DragTable> 
        <el-form-item label="">
          <!-- <span @click="handleUpdate(row)">{{ row.timestamp | parseTime('{y}-{m}-{d} {h}:{i}') }}</span> -->
      </el-form-item>
        <!-- <img :src="this.uploadedImages" alt=""> -->
        <!-- <photo-wall></photo-wall> -->
        <!-- <el-form-item
          v-for="(domain, index) in dynamicValidateForm.domains"
          :key="domain.key"
          :label="'新增' + (index+1)"
        >
          <el-input v-model="domain.value" :autosize="{ minRows: 4, maxRows: 4}" type="textarea" placeholder="Please input" />
          <el-button @click.prevent="removeDomain(domain)">删除</el-button></el-button>
        </el-form-item> -->
        <!-- <el-form-item label="新增补充">
          <el-button @click="addDomain">点击新增</el-button>
        </el-form-item> -->
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button   type="primary" @click="dialogFormVisible = false">
          返回信息中心
        </el-button>
      
        <!-- 弹框确定按钮 -->
        <!-- <el-button type="primary" @click="dialogStatus==='create'?createData():updateData()">
          确定
        </el-button> -->
      </div>
    </el-dialog>

    <el-dialog :visible.sync="dialogPvVisible" title="Reading statistics">
      <el-table :data="pvData" border fit highlight-current-row style="width: 100%">
        <el-table-column prop="key" label="Channel" />
        <el-table-column prop="pv" label="Pv" />
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogPvVisible = false">Confirm</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { tabList, fetchPv, createArticle, updateArticle, ModifyStatus, DeleteList, uploadTest } from '@/api/article'

import waves from '@/directive/waves' // waves directive
import { parseTime } from '@/utils'
import axios from 'axios'
import Pagination from '@/components/Pagination' // secondary package based on el-pagination
import PhotoWall from '@/components/PhotoWall'
import DragTable from './drag-table.vue'

const calendarTypeOptions = [
  { key: '项目经理', display_name: '项目经理' },
  { key: 'CEO', display_name: 'CEO' }
]
// const calendarTypeOptionslist = [
//   { key: '项目经理', display_name: '项目经理' },
//   { key: 'CEO', display_name: 'CEO' },
// ]

// arr to obj, such as { CN : "China", US : "USA" }
const calendarTypeKeyValue = calendarTypeOptions.reduce((acc, cur) => {
  console.log(calendarTypeOptions, 'calendarTypeOptions')
  acc[cur.key] = cur.display_name
  return acc
}, {})


export default {
  name: 'ComplexTable',
  components: { Pagination, PhotoWall,DragTable },
  directives: { waves },
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'info',
        deleted: 'danger'
      }
      return statusMap[status]
    },
    typeFilter(type) {
      return calendarTypeKeyValue[type]
    }
  },
  data() {
    return {
      images: [
        // 'https://imgslim.geekpark.net/uploads/image/file/27/04/27044a576bf3e372377adc83fbaef3ae.png'
      ],
      photos: [],
      uploadedImages: [],
      dialogImageUrl: [],
      dialogVisible: false,
      keyword: '',
      index: '',
      dynamicValidateForm: {
        domains: [{
          value: ''
        }] },
      tableKey: 0,
      list: [],
      total: 0,
      keywordlookup: '',
      listLoading: true,
      params: '',
      listQuery: {
        page: 1,
        limit: 10,
        importance: undefined,
        title: undefined,
        type: undefined,
        sort: '+id',
        id: ''
      },
      importanceOptions: [1, 2, 3],
      calendarTypeOptions,
      sortOptions: [{ label: 'ID Ascending', key: '+id' }, { label: 'ID Descending', key: '-id' }],
      statusOptions: ['已完成', '未完成'],
      showReviewer: false,
      texeAdd: '',
      propsRow:'',
      temp: {
        id: undefined,
        SelectionChange: '',
        importance: 1,
        remark_one: '1',
        remark_two: '1',
        remark_three: '2',
        image_url: [''],
        timestamp: new Date().getTime(),
        title: '',
        type: '',
        author: '',
        status: '未完成'
      },
      dialogFormVisible: false,
      dialogStatus: '',
      textMap: {
        update: 'Edit',
        create: 'Create'
      },
      dialogPvVisible: false,
      pvData: [],
      rules: {
        type: [{ required: true, message: 'type is required', trigger: 'change' }],
        timestamp: [{ type: 'date', required: true, message: 'timestamp is required', trigger: 'change' }],
        title: [{ required: true, message: 'title is required', trigger: 'blur' }],
        author: [{ required: true, message: 'author is required', trigger: 'blur' }]

      },
      downloadLoading: false
    }
  },
  computed: {
    filteredItems() {
      if (this.keyword === '') {
        return this.list
      } else {
        const regex = new RegExp(this.keyword, 'gi')
        console.log('this.keyword222222222', this.keyword)
        console.log('this.regex2222222222222', regex)
        console.log('this.list222222222', this.list)
        // row.title.match(regex)
        return this.list.filter(row => row.title.match(regex) ||
         row.remark_one.match(regex) || row.remark_two.match(regex) || row.remark_three.match(regex) || row.importance.match(regex))
      }
    }
  },
  mounted() {
    const url = window.location.href
    const queryString = decodeURIComponent(url).split('?')[1] // 使用 split() 方法将 URL 字符串按照问号进行分割，并取得分割后的第二部分，即问号后面的内容
    console.log(queryString, 'queryString.queryString.queryString')
    if (queryString) {
      console.log(this.listQuery, 'this.listQuery  更新前')
      const address = queryString.slice(4) // 使用 slice() 方法截取从开始位置到第一个 '&' 符号之前的部分
      console.log(address.length, 'window.location.address')
      if (address.length < 8) {
        this.listQuery.title = address
      }
      console.log(this.listQuery, 'this.listQuery  更新后')
      this.getList()
    } else {
      console.log('没有参数')
      this.getList()
    }
  },
  methods: {

    copyLink(val) { // 复制链接
      console.log(val, '复制链接')
      const url = val // 后台接口返回的链接地址
      const inputNode = document.createElement('input') // 创建input
      inputNode.value = url // 赋值给 input 值
      document.body.appendChild(inputNode) // 插入进去
      inputNode.select() // 选择对象
      document.execCommand('Copy') // 原生调用执行浏览器复制命令
      inputNode.className = 'oInput'
      inputNode.style.display = 'none' // 隐藏
      this.$message.success('复制成功')
    },

    handlePhotoUploaded(photo) {
      // this.photos.push(photo);
      this.uploadedImages = photo
      // this.photos=photo
      console.log(photo, 'photo111')
      this.dialogImageUrl = photo
    },
    getPhotos() {
      console.log(this.photos, 'this.photos')
    },
    highlightKeyword(text) {
      // console.log('666666666666666666', text)
      if (this.keyword === '') {
        return text
      } else {
        const regex = new RegExp(this.keyword, 'gi')
        console.log('regex', regex)
        console.log('text44444444444444444', text)
        return text.toString().replace(regex, '<span class="highlight">$&</span>')
      }
    },
    parseURLParams() {
      const urlParams = new URLSearchParams(window.location.search)
      const params = {}
      for (const [key, value] of urlParams) {
        params[key] = value
      }
      this.params = params
      console.log(this.params, 'paramsparams11')
    },
    getList() {
      this.listLoading = true
      tabList(this.listQuery).then(response => {
        console.log(response, 'response')
        this.list = response.data.sort((a, b) => b.timestamp - a.timestamp)
        // this.list = response.data
        console.log(this.list, 'this.list')
        //  console.log(this.listQuery,'this.listQuery')
        this.total = response.total
        // Just to simulate the time of the request
        setTimeout(() => {
          this.listLoading = false
        }, 1.5 * 1000)
      })
    },
    removeDomain(item) {
      var index = this.dynamicValidateForm.domains.indexOf(item)
      if (index !== -1) {
        this.dynamicValidateForm.domains.splice(index, 1)
      }
    },
    addDomain() {
      console.log(this.$refs['dataForm'].validate, 'this.$refs.validate')
      console.log(this.$refs['dataForm'], 'this.$refs')
      this.dynamicValidateForm.domains.push({
        value: '',
        key: Date.now()
      })
      console.log(this.dynamicValidateForm, ' this.dynamicValidateForm')
    },
    getLists() {
      this.listLoading = true
      tabList(this.keywordlookup).then(response => {
        console.log(response, 'response')
        this.list = response.data
        console.log(this.list, 'this.list')
        //  console.log(this.listQuery,'this.listQuery')
        this.total = response.total
        // Just to simulate the time of the request
        setTimeout(() => {
          this.listLoading = false
        }, 1.5 * 1000)
      })
    },

    // 替换关键字
    // showData(val, searchData) {
    //   // 不区分大小写  const Reg = new RegExp(searchData, 'i');
    //   // 全局替换  const Reg = new RegExp(searchData, 'g');
    //   const Reg = new RegExp(searchData, 'ig')
    //   if (val) {
    //     // 注意 这里推荐使用正则占位符$& 不使用${searchData}  因为当这里使用正则表达式（i）不区分大小写时，如果你的文本是大写，搜索的关键字是小写，匹配结果会替换掉大写的文本
    //     // const res = val.replace(Reg, `<span style="background-color: yellow;">${searchData}</span>`);
    //     const res = val.replace(Reg, `<span style="background-color: yellow;">$&</span>`)
    //     return res
    //   }
    // },
    // handleFilters() {
    //   // console.log(this.keywordlookup,'我点击了关键字查找')
    //   console.log(this.keywordlookup, '2222222222')
    //   // this.getLists()
    // },
    handleFilter() {
      console.log(this.listQuery, 'this.listQuery2222222222')
      this.listQuery.page = 1
      this.getList()
    },
    // handleModifyStatus(row, status) {
    //   console.log(row, 'row')
    //   console.log(status, 'status')
    //   ModifyStatus({
    //     rows: status,
    //     row
    //   }).then(response => {
    //     this.getList()
    //     console.log(response, 'ModifyStatusresponse')
    //     this.$message({
    //       message: '操作Success',
    //       type: 'success'
    //     })w
    //   })
    //   // row.status = status
    // },
    handleModifyStatus(row) {
      console.log(row, 'handleModifyStatus')
      console.log('我想要发送飞书推送')
      axios.post('https://agi-test.geekpark.net/article/feishu/tokens', { texeAdd: row.title }).then(res => {
        console.log(res, 'resssssss飞书token')
      })
    },
    sortChange(data) {
      console.log('data', data)
      console.log('data.prop', data.prop)
      console.log('order', data.order)
      const { prop, order } = data
      if (prop === 'id') {
        this.sortByID(order)
      }
    },
    sortByID(order) {
      if (order === 'ascending') {
        this.listQuery.sort = '+id'
      } else {
        this.listQuery.sort = '-id'
      }
      this.handleFilter()
    },
    resetTemp() {
      this.temp = {
        id: undefined,
        importance: 1,
        // remark: '',
        timestamp: new Date().getTime(),
        title: '',
        status: '未完成',
        type: ''
      }
    },
    handleCreate() {
      this.resetTemp()
      this.dialogStatus = 'create'
      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },
    createData() {
      // console.log(this.$refs['dataForm'].validate,'this.$refs['dataForm']');
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          // this.temp.timestamp=this.temp.timestamp.getTime()
        //   const timestamp = new Date().getTime();
        // const random = Math.floor(Math.random() * 10000);
        // const randomNumber = timestamp + random;
        // this.temp.id = randomNumber
          // console.log(randomNumber,'randomNumber');textarea
          // console.log(random,'random');
          // console.log(timestamp,'timestamp');
          this.temp.id = parseInt(Math.random() * 100) + 1024 // mock a id
          this.temp.image_url = this.dialogImageUrl
          // console.log(this.temp.timestamp.getTime(),'this.temp.timestamp.getTime()')
          // console.log(this.dialogImageUrl,'dialogImageUrl');
          console.log(this.temp, 'this.temp')
          // uploadTest(this.temp).then((res)=>{
          //   console.log(res,'res');
          // })
          createArticle(this.temp).then(() => {
            // this.list.unshift(this.temp)
            // console.log(this.temp.timestamp, 'this.temp')
          // console.log(this.temp.timestamp.getTime() ,'this.temp.timestamp.getTime() ')
          // this.addDomain()
          //   this.removeDomain()
            this.dialogFormVisible = false
            this.texeAdd = this.temp.title

            this.$notify({
              title: 'Success',
              message: 'Created Successfully',
              type: 'success',
              duration: 2000
            })
            this.getList()
            this.handleModifyStatus()
          })
        }
      })
    },
    handleCustomEvent() {
      // 执行子组件的逻辑esponsed[i].commentId
      console.log('接收到自定义事件', row);
    },
    handleUpdate(row) {
 
      this.$emit('custom-event', row);
      this.temp = Object.assign({}, row) // copy obj
      this.temp.timestamp = new Date(this.temp.timestamp)
      console.log(row, 'HandleUpdateRow')
      this.propsRow=row
      console.log(row.image_uri, 'row.image_uri')
      this.uploadedImages = row.image_uri.split(',') ? row.image_uri.split(',') : []
      console.log(this.uploadedImages, 'this.uploadedImages')
      // this.uploadedImages=[]
      // console.log(row.image_uri.split(','),'row.image_uri.split(',')');
      this.dialogStatus = 'update'
      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },
    updateData() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          const tempData = Object.assign({}, this.temp)
          tempData.timestamp = +new Date(tempData.timestamp) // change Thu Nov 30 2017 16:41:05 GMT+0800 (CST) to 1512031311464
          // updateArticle(tempData).then(() => {
          //   const index = this.list.findIndex(v => v.id === this.temp.id)
          //   this.list.splice(index, 1, this.temp)
          //   this.dialogFormVisible = false
          //   // this.addDomain()
          //   // this.removeDomain()
          //   // this.dynamicValidateForm={
          //   //     domains: [{
          //   //       value: ''
          //   // }]}
          this.$notify({
            title: 'Error',
            message: '修改失败,请联系管理员',
            type: 'error',
            duration: 2000
          })
          // })
        }
      })
    },
    handleDelete(row, index) {
      DeleteList(row).then(res => {
        this.$notify({
          title: 'Success',
          message: 'Delete Successfully',
          type: 'success',
          duration: 2000
        })
        this.getList()
      })
      // this.list.splice(index, 1)
    },
    handleFetchPv(pv) {
      fetchPv(pv).then(response => {
        this.pvData = response.data.pvData
        this.dialogPvVisible = true
      })
    },
    handleDownload() {
      this.downloadLoading = true
      import('@/vendor/Export2Excel').then(excel => {
        const tHeader = ['timestamp', 'title', 'type', 'importance', 'status']
        const filterVal = ['timestamp', 'title', 'type', 'importance', 'status']
        const data = this.formatJson(filterVal)
        excel.export_json_to_excel({
          header: tHeader,
          data,
          filename: 'table-list'
        })
        this.downloadLoading = false
      })
    },
    formatJson(filterVal) {
      return this.list.map(v => filterVal.map(j => {
        if (j === 'timestamp') {
          return parseTime(v[j])
        } else {
          return v[j]
        }
      }))
    },
    getSortClass: function(key) {
      const sort = this.listQuery.sort
      return sort === `+${key}` ? 'ascending' : 'descending'
    }
  }
}
</script>

<style lang="scss">
.highlight {
  background-color: yellow;
}
.hieghtLi{
  height:40px;
  overflow: auto;
}

@media (max-width: 1200px) {
  /* 在屏幕宽度小于500像素时应用的CSS样式 */
  .el-form {
  width: 90% !important;
  margin-left: 0px!important;
}
.el-dialog__wrapper>div{
  width: 100%;
  /* background: red; */
}
}

.dialog-footer{
  width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.zhasnhi_div_img{
  width: 100%;
  img{
    width: 100%;
    height: 300px;
  }
}
</style>

